<template>
  <div class="shop-info-container">
    <div class="header">
      <h1>店铺信息管理</h1>
    </div>
    
    <div class="content">
      <form @submit.prevent="handleSave" class="form-card">
        <div class="form-section">
          <h2>基本信息</h2>
          
          <div class="form-group">
            <label>店铺名称</label>
            <input v-model="form.businessName" type="text" placeholder="请输入店铺名称" required />
          </div>
          
          <div class="form-group">
            <label>店铺描述</label>
            <textarea v-model="form.businessExplain" placeholder="请输入店铺描述"></textarea>
          </div>
          
          <div class="form-group">
            <label>店铺地址</label>
            <input v-model="form.businessAddress" type="text" placeholder="请输入店铺地址" />
          </div>
        </div>
        
        <div class="form-section">
          <h2>配送设置</h2>
          
          <div class="form-row">
            <div class="form-group">
              <label>起送价（元）</label>
              <input v-model.number="form.starPrice" type="number" step="0.01" placeholder="0.00" />
            </div>
            
            <div class="form-group">
              <label>配送费（元）</label>
              <input v-model.number="form.deliveryPrice" type="number" step="0.01" placeholder="0.00" />
            </div>
          </div>
        </div>
        
        <div class="form-section">
          <h2>图片设置</h2>
          
          <div class="form-group">
            <label>店铺图标</label>
            <div class="image-upload">
              <img v-if="form.businessImg" :src="form.businessImg" alt="店铺图标" class="preview" />
              <input type="file" @change="handleImageUpload" accept="image/*" />
            </div>
          </div>
        </div>
        
        <div class="form-actions">
          <button type="submit" class="btn btn-primary" :disabled="loading">
          {{ loading ? '保存中...' : '保存修改' }}
        </button>
          <button type="button" @click="handleReset" class="btn btn-secondary">重置</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopInfo',
  data() {
    return {
      form: {
        businessName: '',
        businessExplain: '',
        businessAddress: '',
        starPrice: 0,
        deliveryPrice: 0,
        businessImg: null
      },
      loading: false
    }
  },
  mounted() {
    this.loadBusinessInfo()
  },
  methods: {
    async loadBusinessInfo() {
      try {
        const businessId = this.$store.state.businessId
        if (!businessId) {
          this.$router.push('/login')
          return
        }

        const response = await this.$axios.post('/elm/BusinessManagementController/getBusinessInfo', null, {
          params: { businessId }
        })

        if (response.data && (response.data.code === 200 || response.data.code === '200')) {
          const business = response.data.result
          this.form = {
            businessName: business.businessName || '',
            businessExplain: business.businessExplain || '',
            businessAddress: business.businessAddress || '',
            starPrice: business.starPrice || 0,
            deliveryPrice: business.deliveryPrice || 0,
            businessImg: business.businessImg || null
          }
        } else {
          console.error('获取商家信息失败:', response.data?.message)
        }
      } catch (error) {
        console.error('加载商家信息失败:', error)
      }
    },

    async handleSave() {
      if (!this.form.businessName) {
        alert('请填写店铺名称')
        return
      }

      this.loading = true
      try {
        const businessId = this.$store.state.businessId
        const response = await this.$axios.post('/elm/BusinessManagementController/updateBusinessInfo', null, {
          params: {
            businessId,
            businessName: this.form.businessName,
            businessAddress: this.form.businessAddress,
            businessExplain: this.form.businessExplain,
            starPrice: this.form.starPrice,
            deliveryPrice: this.form.deliveryPrice
          }
        })

        if (response.data && (response.data.code === 200 || response.data.code === '200')) {
          alert('店铺信息保存成功')
          // 更新store中的商家名称
          this.$store.commit('setBusinessInfo', {
            businessId: this.$store.state.businessId,
            businessName: this.form.businessName,
            token: this.$store.state.token
          })
        } else {
          alert('保存失败: ' + (response.data?.message || '未知错误'))
        }
      } catch (error) {
        console.error('保存商家信息失败:', error)
        alert('保存失败，请检查网络连接')
      } finally {
        this.loading = false
      }
    },

    handleReset() {
      this.loadBusinessInfo()
    },

    handleImageUpload(event) {
      const file = event.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.form.businessImg = e.target.result
        }
        reader.readAsDataURL(file)
      }
    }
  }
}
</script>

<style scoped>
.shop-info-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.header {
  background: white;
  padding: 20px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.form-card {
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  max-width: 600px;
}

.form-section {
  margin-bottom: 30px;
}

.form-section h2 {
  font-size: 16px;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #667eea;
}

.form-group {
  margin-bottom: 15px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.image-upload {
  display: flex;
  align-items: center;
  gap: 15px;
}

.preview {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  object-fit: cover;
}

.image-upload input[type="file"] {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: #f0f0f0;
  color: #333;
}

.btn-secondary:hover {
  background: #e0e0e0;
}
</style>
